<template>
  <div class="marquee-container">
    <edu-page-tabs :tab-list="tabs" />
    <el-row type="flex" align="top">
      <div class="left-container">
        <el-form ref="form_data" :model="formData" label-width="120px" label-suffix="：" label-position="right" size="small">
          <!--<el-form-item label="启用状态" prop="open">-->
          <!--  <el-switch-->
          <!--    v-model="formData.open"-->
          <!--    :active-value="1"-->
          <!--    :inactive-value="0"-->
          <!--  />-->
          <!--</el-form-item>-->
          <el-form-item label="操作">
            <div>
              <span>批量设置已创建的点播课程，</span><el-link :underline="false" type="primary" @click="courseSettingVisible=true">点击此处</el-link>
            </div>
          </el-form-item>
          <el-form-item label="内容">
            <div>
              <el-checkbox v-model="formData.phone" :true-label="1" :false-label="0">手机号</el-checkbox>
              <el-checkbox v-model="formData.username" :true-label="1" :false-label="0">用户名</el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="样式">
            <div class="marquee-style">
              <el-row class="style-item" type="flex">
                <div class="item-title">字体颜色</div>
                <div class="item-body color-list">
                  <el-row type="flex" class="tab">
                    <span
                      v-for="color in selectColors"
                      :key="color"
                      class="color-box"
                      :style="{ backgroundColor: color }"
                      @click="formData.font_color = color"
                    >
                      <i v-show="formData.font_color === color" class="el-icon-success" />
                    </span>
                  </el-row>
                </div>
              </el-row>
              <el-row class="style-item" type="flex">
                <div class="item-title">字体大小</div>
                <div class="item-body">
                  <el-slider v-model="formData.font_size" :min="12" :max="60" />
                </div>
              </el-row>
              <el-row class="style-item" type="flex">
                <div class="item-title">透明度</div>
                <div class="item-body">
                  <el-slider v-model="formData.font_opacity" :min="0" :max="100" :step="1" />
                  <div class="edu-tips">值越低越透明</div>
                </div>
              </el-row>
              <el-row class="style-item" type="flex">
                <div class="item-title">滚动频率</div>
                <div class="item-body">
                  每隔 <el-input-number v-model="formData.frequency" :min="5" :step="1" :max="60" /> 秒出现一次（最大设置为60秒）
                </div>
              </el-row>
              <el-row class="style-item" type="flex">
                <div class="item-title">版权声明</div>
                <div class="item-body">
                  <el-checkbox v-model="formData.copyright" :true-label="1" :false-label="0">开启</el-checkbox><span class="tips">可选择是否在课程的顶部展示版权声明</span>
                  <el-input
                    v-model="formData.copyright_content"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 10}"
                    placeholder="版权内容"
                  />
                </div>
              </el-row>
            </div>
          </el-form-item>
          <form-footer :loading="disableSubmit" confirm-btn-text="保存" :cancel-btn="false" fixed @submit="saveConfig" />
        </el-form>
      </div>
      <!--<div class="right-container">-->
      <!--  <div class="view" />-->
      <!--</div>-->
    </el-row>
    <el-dialog title="批量设置已创建的点播课程跑马灯" :visible="courseSettingVisible" width="40%" top="15vh" :close-on-click-modal="false" @close="handlerCourseSettingClose">
      <div>
        <el-radio-group v-model="courseMarquee">
          <el-radio :label="1">全部开启</el-radio>
          <el-radio :label="0">全部关闭</el-radio>
        </el-radio-group>
      </div>
      <div slot="footer">
        <el-button type="primary" size="small" :disabled="disableSubmit" @click="handlerCourseSettingConfirm">确认</el-button>
        <el-button size="small" @click="handlerCourseSettingClose">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EduPageTabs from '@public/template/tabs/page_tabs.vue';
import FormFooter from '@/components/form-footer'

export default {
  components: {
    EduPageTabs,
    FormFooter
  },
  data() {
    return {
      configKey: 'course.video.marquee',
      tabs: [
        {
          title: '已审',
          uri: '/course/video/list',
          meta: {
            permission: 'course.video.default'
          }
        },
        {
          title: '待审',
          uri: '/course/video/examine/list',
          meta: {
            permission: 'course.video.examine'
          }
        },
        {
          title: '推荐',
          uri: '/course/video/recommend',
          meta: {
            permission: 'course.video.recommend'
          }
        },
        {
          title: '跑马灯',
          uri: '/course/video/marquee',
          meta: {
            permission: 'course.video.marquee'
          }
        }
      ],
      formData: {
        // open: 0,
        phone: 0,
        username: 0,
        font_color: '#FFFFFF',
        font_size: 12,
        font_opacity: 0,
        frequency: 5,
        copyright: 0,
        copyright_content: ''
      },
      selectColors: [
          '#333333', '#1673FF', '#1FA5F9', '#8179EF', '#08C262', '#16BE84',
          '#FCD100', '#DEBB78', '#FF9645', '#FA648B', '#FF2C2E', '#FFFFFF'
      ],
      disableSubmit: false,
      courseSettingVisible: false,
      courseMarquee: undefined
    };
  },
  created() {
    this.loadConfig()
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  methods: {
    // 设置配置
    loadConfig() {
      this.$http.get(
          '/admin/system/config',
          {
            __key: this.configKey
          },
          ({ data }) => {
            this.formData = { ...this.formData, ...data }
          },
          error => {
            this.$message.error(error.msg);
          },
          false
      );
    },
    // 保存配置
    saveConfig() {
      this.disableSubmit = true
      this.$http.post(
          '/admin/system/config/save',
          {
            ...this.formData,
            __key: this.configKey
          },
          response => {
            this.$message.success(response.msg)
            this.disableSubmit = false;
          },
          error => {
            this.disableSubmit = false;
            this.$message.error(error.msg);
          },
          false
      );
    },
    // 关闭课程设置弹出层
    handlerCourseSettingClose() {
      this.courseSettingVisible = false
    },
    // 提交课程设置
    handlerCourseSettingConfirm() {
      this.disableSubmit = true
      this.$http.put(
          '/course/admin/batch/updated/is_marquee',
          {
            is_marquee: this.courseMarquee
          },
          response => {
            this.$message.success(response.msg)
            this.disableSubmit = false;
            this.handlerCourseSettingClose()
          },
          error => {
            this.disableSubmit = false;
            this.$message.error(error.msg);
          },
          false
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.marquee-container{
  .left-container{
    width: 60%;
    .marquee-style{
      .style-item{
        margin-bottom: 4px;
        .item-title{
          text-align: right;
          width: 60px;
          margin-right: 20px;
          font-size: 14px;
          color: #606266;
        }
        .item-body{
          width: 80%;
          .tips{
            font-size: 13px;
            color: #8C8C8C;
            margin-left: 8px;
          }
        }
        .color-list {
          flex-wrap: wrap;
          .color-box {
            border: 1px solid #cccccc;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;

            .el-icon-success {
              font-size: 18px;
            }

            & + .color-box {
              margin-left: 6px;
            }
          }
        }
      }
    }
  }
  .right-container{
    width: 40%;
    .view{
      width: 320px;
      height: 480px;
      background-color: #F7F7F7;
    }
  }
}
</style>
